<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.springframework.org/schema/mvc">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>推广活动</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <script src="/kindeditor/kindeditor-all.js"></script>
    <script src="/kindeditor/lang/zh-CN.js"></script>
    <style>
        #copyText {
            width: 0;
            height: 0;
            opacity: 0;
            position: absolute;
            left: -9999px;
            top: -9999px;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">
            <button class="layui-btn layui-btn-sm" id="addActivity">添加推广活动</button>
        </div>
        <div class="layui-card-body">
            <table class="layui-hide" id="activity_table" lay-filter="activity_table"></table>
            <textarea id="copyText"></textarea>
        </div>
    </div>
</div>

<script type="text/html" id="activity_context_list">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-xs" lay-event="copy"><i class="layui-icon layui-icon-link"></i></button>
        <button class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
        <button class="layui-btn layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i></button>
    </div>
</script>
</body>
<script th:inline="javascript">
    //使用指定的模块
    layui.use(['layer', 'table'], function () {
        let layer = layui.layer;
        let table = layui.table;
        let $ = layui.$;
        let util = layui.util;
        let user = layui.data('user');
        table.render({
            elem: '#activity_table'
            , url: 'activitylist?login_name=' + user.user_id,
            area: '900px'
            , cellMinWidth: 80     //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [
                [
                    {type: "checkbox", fixed: "left"},
                    {
                        field: "activityType", title: "活动类型", align: "center", templet: function (d) {
                            if (d.activityType == 1) {
                                return "邀请经纪人活动";
                            } else if (d.activityType == 2) {
                                return "推荐客户活动";
                            }
                        }
                    },
                    {field: "activityTitle", title: "活动标题", align: "center",},
                    {
                        field: "beginTime", title: "开始时间", align: "center", templet: function (d) {
                            return util.toDateString(d.beginTime, 'yyyy-MM-dd HH:mm:ss');
                        }
                    },
                    {
                        field: "endTime", title: "结束时间", align: "center", templet: function (d) {
                            return util.toDateString(d.endTime, 'yyyy-MM-dd HH:mm:ss')
                        }
                    },
                    {
                        field: "createTime", title: "创建时间", align: "center", templet: function (d) {
                            return util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm:ss')
                        }
                    },
                    {
                        field: 'activityStatus', title: '活动状态', align: "center", templet: function (d) {
                            if (d.activityStatus == 1) {
                                return "<button class='layui-btn layui-btn-xs layui-btn-normal'>有效</button>"
                            }else{
                                return "<button class='layui-btn layui-btn-xs layui-btn-normal'>无效</button>"
                            }
                        }
                    },
                    {title: "操作", minWidth: 200, align: "center", fixed: "right", toolbar: "#activity_context_list"}
                ]
            ]
            , page: true,
            limit: 10,
            text: {none: '一条数据也没有^_^'}
            , done: function (res, curr, count) {
            }
        });

        table.on('tool(activity_table)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            if (layEvent === 'copy') {
                var copyText = document.getElementById("copyText");
                let url = [[${url}]];
                copyText.innerText = url + "m/act/detail?actAlias=" + data.actAlias;
                copyText.select();
                document.execCommand("copy");
                layer.msg("复制成功", {anim: 2});

            } else if (layEvent === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    $.post('delActivity', {'id': data.id}, function (resp) {
                        if (resp.code == "0") {
                            layer.msg(resp.msg);
                            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                            layer.close(index);
                        } else {
                            layer.msg(resp.msg);
                        }
                    })
                });
            } else if (layEvent === 'edit') { //编辑

                var index = layer.open({
                    title: "编辑活动",
                    type: 2,
                    content: "addexten?id=" + data.id+"&coverImg="+data.coverImg,
                    success: function (layero, index) {
                        var body = layui.layer.getChildFrame('body', index);
                        body.find("#activitytitle").val(data.activityTitle);
                        body.find("#activity_type").val(data.activityType);
                        body.find("#date1").val(util.toDateString(data.beginTime, 'yyyy-MM-dd HH:mm:ss'));
                        body.find("#date2").val(util.toDateString(data.endTime, 'yyyy-MM-dd HH:mm:ss'));
                        body.find("#coverImg").empty().append("<img src='" + data.coverImg + "' width='300px' height='300px'>");
                    },
                    btn: ['确定提交'],
                    yes: function (index, layero) {
                        //点击确认触发 iframe 内容中的按钮提交
                        let submit = layero.find('iframe').contents().find("#editActivitySubmit");
                        submit.click();
                    }
                });
                layer.full(index);
            }
        });

        $('#addActivity').click(function () {
            var index = layer.open({
                type: 2,
                title: '添加活动',

                content: 'addexten', //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                btn: ['确定提交']
                , yes: function (index, layero) {
                    //点击确认触发 iframe 内容中的按钮提交
                    let submit = layero.find('iframe').contents().find("#addActivitySubmit");
                    submit.click();
                }
            });
            layer.full(index);
        })
    });


</script>
</html>